<template>
    <div class="comment_container">
        <div class="publishComment">
            <div class="publishComment_des">
                <div class="publishComment_des_img">
                    <img src="https://app.jike.ruguoapp.com/avatar/5c3461aa532b9f00112847d4?imageView2/0/w/120/h/120/q/100!"
                         alt="">
                </div>
                <div class="publishComment_des_text">
                    <textarea placeholder="友善发言的人运气不会差" @input="autoTextAreaHeight" ref="textarea"
                              v-model="textDes" rows="1"></textarea>
                </div>
            </div>
            <div class="publishComment_handler">
                <div class="publishComment_handler_left">
                    <span class="iconfont icon-tupian"></span>
                    <a href="#">图片</a>
                </div>
                <div class="publishComment_handler_right">
                    发布
                </div>
            </div>
        </div>
        <div class="allCommentList">
            <div class="commentList_title">最新评论</div>
            <div class="allCommentList_des">
                <div class="allCommentList_des_img">
                    <img src="https://app.jike.ruguoapp.com/avatar/5c3461aa532b9f00112847d4?imageView2/0/w/120/h/120/q/100!"
                         alt="">
                </div>
                <div class="allCommentList_des_content">
                    <div class="comment_user">
                        <span>即刻用户_fyz9lv44hl5ugrfwdlf</span>
                        <span>13:03</span>
                    </div>
                    <p class="comment_content">111111111111</p>
                    <div class="zan addZanBorder">
                        <span class="iconfont icon-zan"></span>
                        <span>0</span>
                    </div>
                </div>
            </div>
            <div class="allCommentList_des">
                <div class="allCommentList_des_img">
                    <img src="https://app.jike.ruguoapp.com/avatar/5c3461aa532b9f00112847d4?imageView2/0/w/120/h/120/q/100!"
                         alt="">
                </div>
                <div class="allCommentList_des_content">
                    <div class="comment_user">
                        <span>即刻用户_fyz9lv44hl5ugrfwdlf</span>
                        <span>13:03</span>
                    </div>
                    <p class="comment_content">111111111111</p>
                    <div class="zan">
                        <span class="iconfont icon-zan"></span>
                        <span>0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                textDes: ''
            }
        },
        methods: {
            autoTextAreaHeight() {
                let o = this.$refs.textarea;
                o.style.height = 'auto';
                o.style.height = o.scrollHeight + "px";
                console.log(o.getAttribute("rows"));
                if (this.textDes == '') {
                    o.style.height = '18px';
                }
            }
        }
    }
</script>

<style type="text/scss" lang="scss" scoped>
    .comment_container {
        width: 100%;
        background-color: #F7F7F7;
        border-top: 1px solid #dbdbdb;

        .publishComment {
            width: 100%;
            padding-bottom: 10px;

            .publishComment_des {
                width: 95%;
                display: flex;
                justify-content: flex-start;
                padding: 10px 15px;

                .publishComment_des_img {
                    img {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }
                }

                .publishComment_des_text {
                    width: 87%;
                    border: 1px solid #bfbfbf;
                    margin-left: 10px;
                    border-radius: 5px;
                    padding: 5px 10px;
                    background-color: white;
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;

                    textarea {
                        width: 100%;
                        height: 18px;
                        overflow-y: hidden;
                        outline: none;
                        resize: none;
                        font-size: 14px;
                        font-weight: lighter;
                        font-family: monospace;
                        color: #383838;
                        border: none;
                    }
                }
            }

            .publishComment_handler {
                width: 83%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: 80px;
                font-size: 12px;
                margin-top: -10px;

                .publishComment_handler_left {
                    cursor: pointer;
                    display: flex;
                    align-items: center;

                    a {
                        color: #383838;
                        margin-left: 5px;
                    }

                    &:hover > a {
                        color: #03a9f4;
                    }
                }

                .publishComment_handler_right {
                    width: 58px;
                    height: 27px;
                    text-align: center;
                    line-height: 27px;
                    border-radius: 20px;
                    cursor: pointer;
                    background: #6dd1fd;
                    color: white;
                    font-weight: lighter;
                }
            }
        }

        .allCommentList {
            width: 100%;
            border-top: 1px solid #dbdbdb;
            padding-bottom: 10px;

            .commentList_title {
                width: 100%;
                height: 30px;
                font-size: 14px;
                font-weight: 500;
                color: #383838;
                padding: 15px 0 0 20px;
            }

            .allCommentList_des {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                margin-left: 50px;
                margin-top: 10px;

                .allCommentList_des_img {
                    width: 30px;

                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }
                }

                .allCommentList_des_content {
                    width: 80%;
                    margin-left: 10px;
                    font-size: 12px;
                    color: #383838;

                    .comment_user {
                        padding-top: 5px;

                        span {
                            cursor: pointer;

                            &:last-of-type {
                                margin-left: 10px;
                                color: #d9d9d9;
                            }
                        }
                    }

                    .comment_content {
                        width: 100%;
                        margin-top: 15px;
                    }

                    .zan {
                        width: 100%;
                        margin-top: .8em;
                        cursor: pointer;
                        user-select: none;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-bottom: 10px;

                        .icon-zan {
                            color: #ccc;
                        }

                        span:last-of-type {
                            color: #ccc;
                            font-size: 15px;
                            margin-left: 5px;
                        }

                        .icon-zan:hover {
                            color: gray;
                        }
                    }

                    .addZanBorder {
                        border-bottom: .5px solid #d9d9d9;
                    }
                }
            }
        }
    }
</style>